<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>编辑</h1>

        <div class="con">
            <input type="text" name="pname" class="ipt">
            <input type="text" name="pimg" class="ipt">
            <input type="text" name="pdesc" class="ipt">
            <input type="text" name="pprice" class="ipt">
        </div>

        <input type="button" value="保存" class="saveBtn">

        <script src="./js/axios.min.js"></script>

        <script>

/* 
根据商品id获取商品详，将商品详情展示到输入框
用户可以去修改，点击保存按钮 调用保存商品接口




根据商品id获取商品详情接口

 接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
接口请求方式：get
接口参数：
id  商品的id
使用方式
获取id为1的商品的详情
http://jx.xuzhixiang.top/ap/api/detail.php?id=1



修改商品 接口

接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-update.php
     接口请求方式：get
     接口参数：

            pid（必选）商品的id
pname（必选）商品
pprice（必选）商品
pdesc（必选）商品

      使用方式


 http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459
 */

            let url = 'http://jx.xuzhixiang.top/ap/api/detail.php';
            // id  商品的id  在url中 ?aaa==11
            console.log(location.search)//?pid=260873&aaa=22
            // aaa=111; aabb=22; bb=2
          

            //URLSearchParams 把 url中 ?号后面的部分转为 对象
            let urlParams = new URLSearchParams(location.search);
            console.log(urlParams)
            let id = urlParams.get('pid')//get  获取url中具体的参数
            console.log(id)


            axios.get(url,{params:{id}}).then(res=>{
                console.log(res.data.data)
                let obj = res.data.data

                let html = `
                <input type="text" name="pname" class="ipt" value="${obj.pname}">
                <input type="text" name="pimg" class="ipt" value="${obj.pimg}">
                <input type="text" name="pdesc" class="ipt" value="${obj.pdesc}">
                <input type="text" name="pprice" class="ipt" value="${obj.pprice}">
                
                `
                let con = document.querySelector('.con');
                con.innerHTML = html;

            })

            // 保存按钮 获取参数 发起修改请求
            // 
            let  saveBtn = document.querySelector('.saveBtn');
            saveBtn.onclick = async function(){

                // 接口参数
                let params = {pid:id};
                let ipts = document.querySelectorAll('.ipt');
                ipts.forEach(ipt=>{
                    params[ipt.name] = ipt.value
                })
                console.log(params)

                // 接口地址 
                let url = 'http://jx.xuzhixiang.top/ap/api/goods/goods-update.php'

                let res = await axios.get(url,{params})
                console.log(res.data);
                //  返回上一页
                history.back()

            }



        </script>
    
</body>
</html>